<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0实现模拟手机加载动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            body {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                background: #000;
            }
 
            .loader {
                display: flex;
                align-items: flex-end;
            }
 
            .loader span {
                width: 20px;
                background: #111;
                margin: 0 10px;
                height: calc(20px * var(--i));
                display: flex;
                justify-content: center;
                align-items: flex-end;
                transform: translateY(-35px);
                animation: animate 2s linear infinite;
                animation-delay: calc(0.25s * var(--i));
            }
 
            @keyframes animate {
                0% {
                    background: #fff;
                    filter: blur(2px);
                    box-shadow: 0 0 10px #00b3ff,
                        0 0 20px #00b3ff,
                        0 0 40px #00b3ff,
                        0 0 80px #00b3ff,
                        0 0 120px #00b3ff,
                        0 0 200px #00b3ff,
                        0 0 300px #00b3ff,
                        0 0 400px #00b3ff;
                }
 
                25%,
                75% {
                    background: #111;
                    filter: blur(0px);
                    box-shadow: none;
                }
 
                100% {
                    background: #fff;
                    filter: blur(2px);
                    box-shadow: 0 0 10px #00b3ff,
                        0 0 20px #00b3ff,
                        0 0 40px #00b3ff,
                        0 0 80px #00b3ff,
                        0 0 120px #00b3ff,
                        0 0 200px #00b3ff,
                        0 0 300px #00b3ff,
                        0 0 400px #00b3ff;
                }
            }
 
            .loader span i {
                display: block;
                font-style: normal;
                font-size: 50px;
                color: #fff;
                font-weight: bold;
                transform: translateY(70px);
                animation: animate2 2s linear infinite;
                animation-delay: calc(0.25s * var(--i));
            }
 
            @keyframes animate2 {
                0% {
                    color: #fff;
                    filter: blur(2px);
                    text-shadow: 0 0 10px #00b3ff,
                        0 0 20px #00b3ff,
                        0 0 40px #00b3ff,
                        0 0 80px #00b3ff,
                        0 0 120px #00b3ff,
                        0 0 200px #00b3ff,
                        0 0 300px #00b3ff,
                        0 0 400px #00b3ff;
                }
 
                25%,
                75% {
                    color: #111;
                    filter: blur(0px);
                    text-shadow: none;
                }
 
                100% {
                    color: #fff;
                    filter: blur(2px);
                    text-shadow: 0 0 10px #00b3ff,
                        0 0 20px #00b3ff,
                        0 0 40px #00b3ff,
                        0 0 80px #00b3ff,
                        0 0 120px #00b3ff,
                        0 0 200px #00b3ff,
                        0 0 300px #00b3ff,
                        0 0 400px #00b3ff;
                }
            }
        </style>
    </head>
 
    <body>
        <div class="loader">
            <span style="--i:1"><i>L</i></span>
            <span style="--i:2"><i>o</i></span>
            <span style="--i:3"><i>a</i></span>
            <span style="--i:4"><i>d</i></span>
            <span style="--i:5"><i>i</i></span>
            <span style="--i:6"><i>n</i></span>
            <span style="--i:7"><i>g</i></span>
            <span style="--i:8"><i>.</i></span>
        </div>
    </body>
 
</html>